<template>
	<v-header />
	<v-sidebar />
	<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
		<v-tags></v-tags>
		<div class="content">
			<!-- 主页组件 -->
			<router-view v-slot="{ Component}">
				<!-- <Transition>中的组件渲染无法设置动画的非元素根节点。 -->
				<!-- <component :is="Component" :key="route.name" v-if="route.meta.isKeepAlive"></component> -->
				<transition name="move" mode="out-in">
						<div>
							<!-- :include="tags.nameList" -->
							<keep-alive>
								
								<component :is="Component"></component>
							</keep-alive>
						</div>
				</transition>
			</router-view>
		</div>
	</div>
</template>
<script setup lang="ts">



// 导入pinia提供的数据状态管理
import { useSidebarStore } from '../store/sidebar';
import { useTagsStore } from '../store/tags';

// 组件
import vHeader from '../components/header.vue';
import vSidebar from '../components/sidebar.vue';
import vTags from '../components/tags.vue';

import { useRoute } from 'vue-router';


// 创建pinia储存对象
const sidebar = useSidebarStore();
const tags = useTagsStore();
const $route = useRoute();


</script>
